<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<!-- 遮罩层 -->
	<div id="shadow"></div>

	<!-- 头部 -->
	<header id="head">
		<!-- 左边 -->
		<ul class="nav">
			<li>
				<a href="#">
					<span class="iconfont logo">&#xe600;</span>
					<span class="mainweb">主站<i class="iconfont">&#xe662;</i></span>
				</a>
			</li>
			<li><a href="#">番剧</a></li>
			<li><a href="#">游戏中心</a></li>
			<li><a href="#">直播</a></li>
			<li><a href="#">会员购</a></li>
			<li><a href="#">漫画</a></li>
			<li><a href="#">赛事</a></li>
			<li class="scroll">
				<div>
					<a href="#">月圆会</a>
					<a href="#"><img src="images/ico_01.png" alt=""></a>
					<a href="#">月圆会</a>
				</div>
			</li>
			<li>
				<a href="#" class="iconfont">&#xe638</a>
				<a href="#">下载APP</a>
			</li>
		</ul>
		<!-- 中间 -->
		<div class="search">
			<input type="text">
			<button class="iconfont">&#xe688;</button>
		</div>
		<!-- 右边 -->
		<div class="user">
			<a href="#" class="avatar"><img src="images/avatar.jpg" alt=""></a>
			<ul>
				<li><a href="#">大会员</a></li>
				<li class="msg"><a href="#">消息</a><i>2</i></li>
				<li><a href="#">动态</a></li>
				<li><a href="#">收藏</a></li>
				<li><a href="#">历史</a></li>
				<li><a href="#">创作中心</a></li>
			</ul>
			<a href="#" class="btn">投稿</a>
		</div>
	</header>

	<!-- 吸顶导航 -->
	<div class="appointment">
		<button class="appointmentBtn appointmentedBtn">预约直播</button>
	</div>

	<!-- 内容区域 -->
	<div id="content">
		<!-- banner -->
		<div class="banner">
			<img src="images/banner.png" alt="">
			<img src="images/appointment_text.png" alt="点击预约直播即可参与抽奖">
			<button class="appointmentBtn appointmentedBtn">预约直播</button>
			<button class="ticket">查看门票</button>
		</div>

		<!-- 视频播放器 -->
		<div class="movie">
			<div class="movieBox">
				<iframe src="https://player.bilibili.com/player.html?aid=505324032&amp;bvid=BV1mg411V7GA&amp;cid=403551075&amp;page=1" scrolling="no" border="0" frameborder="no"></iframe>
			</div>
			<ul class="movieTab">
				<li>
					<img src="images/movie_01.webp" alt="">
					<p>中秋还能这样玩！花好月圆会邀你共赴一场月下之约</p>
				</li>
			</ul>
		</div>

		<!-- 建设银行 -->
		<div class="ccbad center">
			<a href="#"><img src="images/ccbad.jpg" alt=""></a>
		</div>
		<!-- 活动介绍-->
		<div class="title1 anchor center">
			<img src="images/title_01.png" alt="">
		</div>
		<!-- 月下嘉宾 -->
		<div class="title2 anchor center">
			<img src="images/title_02.png" alt="">
		</div>

		<!-- 名单 -->
		<div class="guest">
			<div class="tab">
				<button>嘉宾名单</button>
				<button class="active">up主名单</button>
			</div>
			<div class="tabContent">
				<div class="scroll ">
					<div class="guestName">
						<div class="photo photo1">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo photo2">
							<a href="#" class="img"></a>
							<button></button>
						</div>
					</div>
				</div>
				<div class="scroll active">
					<div class="upName">
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
						<div class="photo">
							<a href="#" class="img"></a>
							<button></button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 中秋福利 -->
		<div class="title3 anchor center">
			<img src="images/title_03.png" alt="">
		</div>
		<div class="festival">
			<!-- 抽奖九宫格 -->
			<ul class="prize">
				<li>
					<img src="images/prize_01.png" alt="">
					<p>哔哩哔哩幻星集Ⅱ2233金属书签</p>
				</li>
				<li>
					<img src="images/prize_02.png" alt="">
					<p>哔哩哔哩日常系列2233Aloha篇抱枕</p>
				</li>
				<li>
					<img src="images/prize_03.png" alt="">
					<p>哔哩哔哩小电视毛绒绒兔子包</p>
				</li>
				<li>
					<img src="images/prize_04.png" alt="">
					<p>哔哩哔哩小电视兔子系列连帽围巾</p>
				</li>
				<li>
					<img src="images/prize_05.png" alt="">
					<p>哔哩哔哩魔发师盲盒</p>
				</li>
				<li>
					<img src="images/prize_06.png" alt="">
					<p>谢谢参与</p>
				</li>
				<li>
					<img src="images/prize_07.png" alt="">
					<p>哔哩哔哩真无线蓝牙耳机礼盒【猫王定制】</p>
				</li>
				<li>
					<img src="images/prize_08.png" alt="">
					<p>哔哩哔哩小电视透明PVC背包</p>
				</li>
				<li class="btn">
					<img src="images/draw_btn.png" alt="">
				</li>
			</ul>
			<!-- 中奖信息 -->
			<div class="msg">
				<p class="drawNum">您当前剩余<strong>0</strong>次抽奖机会</p>
				<div class="nameList">
					<div class="title">
						<h3>获奖名单</h3>
						<a href="#">我的中奖信息></a>
					</div>
					<div class="scroll">
						<ul>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
							<li>***欧洲人<span>通过抽奖获得了</span> 哔哩哔哩小电视毛绒绒兔子包</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 抽奖规则 -->
			<div class="rule center">
				<button><img src="images/draw_rule.png" alt=""></button>
			</div>

			<!-- 抽奖规则弹出框 -->
			<div class="drawRule">
				<div class="box">
					<img src="images/rule.png" alt="">
					<button class="close"></button>
				</div>
			</div>

			<!-- 中奖提示 -->
			<div id="dialog">
				<div class="box">
					<h3 class="title">空空的</h3>
					<div class="content">
						<p>恭喜你抽中了：哔哩哔哩小电视透明PVC背包</p>
						<button class="ok">好的</button>
						<button class="close"></button>
					</div>
				</div>
			</div>
		</div>

		<!-- 国风一览 -->
		<div class="title4 anchor center">
			<img src="images/title_04.png" alt="">
		</div>
		<div class="type">
			<ul>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
				<li>
					<a href="#"></a>
					<a href="#"></a>
				</li>
			</ul>
			<div class="more center">
				<a href="#"><img src="images/more_btn.png" alt=""></a>
			</div>
		</div>

		<!-- 合作伙伴 -->
		<div class="title5 anchor center">
			<img src="images/title_05.png" alt="">
		</div>

		<!-- 发布动态 -->
		<div class="title6 anchor center">
			<img src="images/title_06.png" alt="">
		</div>
		<div class="join anchor center">
			<img src="images/partake_bg.png" alt="">
		</div>

		<!-- 动态 -->
		<div class="dynamic">
			<iframe src="https://www.bilibili.com/blackboard/activity-feedtag.html?topic=花好月圆会&amp;uid=1171419159" frameborder="0" width="980" height="600"></iframe>
		</div>

		<!-- 分享 -->
		<div class="share">
			<h3>分享</h3>
			<ul>
				<li></li>
				<li></li>
				<li>
					<div class="wechart">
						<h4>微信扫一扫分享</h4>
						<img src="images/erCode.png" alt="">
					</div>
				</li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>

	<!-- 侧边导航 -->
	<div id="navigator">
		<ul>
			<li class="active">
				<img src="images/navigator_01.png" alt="">
				<img src="images/navigator_01_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_02.png" alt="">
				<img src="images/navigator_02_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_03.png" alt="">
				<img src="images/navigator_03_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_04.png" alt="">
				<img src="images/navigator_04_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_05.png" alt="">
				<img src="images/navigator_05_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_06.png" alt="">
				<img src="images/navigator_06_active.png" alt="">
			</li>
			<li>
				<img src="images/navigator_07.png" alt="">
				<img src="images/navigator_07_active.png" alt="">
			</li>
		</ul>
	</div>
	
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/index.js"></script>
</body>

</html>